Conversation
- putUpdateHandwriting: invalidateQueries → setQueryData로 변경하여 저장 후 즉시 캐시 반영 - useGetHandwriting: staleTime: Infinity, refetchOnWindowFocus: false 추가하여 불필요한 refetch 방지 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts the React Query caching strategy for the student scrap handwriting API in apps/native, aiming to prevent unnecessary refetches and to reflect saved handwriting immediately in the local cache.
Changes:
useGetHandwriting: setsstaleTime: InfinityandrefetchOnWindowFocus: falseto reduce refetches on focus/tab switches.useUpdateHandwriting: replaces a (previously commented) invalidation approach withsetQueryDatato update the handwriting query cache immediately after saving.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/native/src/apis/controller/student/scrap/handwriting/useGetHandwriting.ts | Tweaks query freshness/refetch behavior to avoid UI flicker due to refetching. |
| apps/native/src/apis/controller/student/scrap/handwriting/putUpdateHandwriting.ts | Updates cache on mutation success so UI can reflect saved handwriting without refetch. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| onSuccess: (_, { scrapId, request }) => { | ||
| queryClient.setQueryData( | ||
| TanstackQueryClient.queryOptions('get', '/api/student/scrap/{scrapId}/handwriting', { | ||
| params: { path: { scrapId } }, | ||
| }).queryKey, | ||
| { data: request.data } |
There was a problem hiding this comment.
setQueryData에 { data: request.data }를 넣으면 GET /handwriting 캐시 타입(스크랩 ID/updatedAt 포함 ScrapHandwritingResp)과 shape가 달라지고, 서버가 응답에서 보정한 값/updatedAt도 반영되지 않습니다. onSuccess의 첫 번째 인자인 mutation response를 사용해 캐시를 동일한 응답 객체로 설정하거나, 기존 캐시와 merge해서 scrapId/updatedAt 필드를 유지하도록 수정해 주세요.
| onSuccess: (_, { scrapId, request }) => { | |
| queryClient.setQueryData( | |
| TanstackQueryClient.queryOptions('get', '/api/student/scrap/{scrapId}/handwriting', { | |
| params: { path: { scrapId } }, | |
| }).queryKey, | |
| { data: request.data } | |
| onSuccess: (response, { scrapId }) => { | |
| queryClient.setQueryData( | |
| TanstackQueryClient.queryOptions('get', '/api/student/scrap/{scrapId}/handwriting', { | |
| params: { path: { scrapId } }, | |
| }).queryKey, | |
| response |
| }, | ||
| { | ||
| enabled, | ||
| staleTime: Infinity, |
There was a problem hiding this comment.
staleTime: Infinity로 인해 이 쿼리는 기본적으로 더 이상 stale 상태가 되지 않아, 이후 데이터 변경은 mutation에서 setQueryData/invalidateQueries로 보장해야 합니다. 현재 useDeleteHandwriting는 ['scrap','handwriting',scrapId] 형태의 queryKey를 invalidate하고 있어(openapi-react-query TanstackQueryClient.useQuery의 queryKey와 불일치), 삭제 후에도 이 캐시가 남을 수 있습니다. handwriting 관련 mutation들이 모두 TanstackQueryClient.queryOptions(...).queryKey를 사용하도록 정리하거나, 삭제 시 해당 queryKey에 대해 setQueryData(undefined)/invalidate를 해 주세요.
| staleTime: Infinity, |
Summary
handwriting API의 캐시 전략을 개선하여 불필요한 refetch를 방지하고 저장 후 즉시 캐시를 반영합니다.
Linear
Changes
invalidateQueries→setQueryData로 변경하여 저장 후 서버 재요청 없이 캐시 즉시 반영staleTime: Infinity,refetchOnWindowFocus: false추가하여 탭 전환/포커스 시 불필요한 refetch 방지Testing
Risk / Impact